
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _event = require('../utils/dom/event');

const _bindEvent = require('../mixins/bind-event');

const _Key = _interopRequireDefault(require('./Key'));

const _createNamespace = (0, _utils.createNamespace)('number-keyboard');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];
const t = _createNamespace[2];

const _default = createComponent({
  mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
    if (this.hideOnClickOutside) {
      bind(document.body, 'touchstart', this.onBlur);
    }
  })],
  model: {
    event: 'update:value',
  },
  props: {
    show: Boolean,
    title: String,
    zIndex: [Number, String],
    closeButtonText: String,
    deleteButtonText: String,
    closeButtonLoading: Boolean,
    theme: {
      type: String,
      default: 'default',
    },
    value: {
      type: String,
      default: '',
    },
    extraKey: {
      type: String,
      default: '',
    },
    maxlength: {
      type: [Number, String],
      default: Number.MAX_VALUE,
    },
    transition: {
      type: Boolean,
      default: true,
    },
    showDeleteKey: {
      type: Boolean,
      default: true,
    },
    hideOnClickOutside: {
      type: Boolean,
      default: true,
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    show: function show(val) {
      if (!this.transition) {
        this.$emit(val ? 'show' : 'hide');
      }
    },
  },
  computed: {
    keys: function keys() {
      const keys = [];

      for (let i = 1; i <= 9; i++) {
        keys.push({
          text: i,
        });
      }

      switch (this.theme) {
        case 'default':
          keys.push({
            text: this.extraKey,
            type: 'extra',
          }, {
            text: 0,
          }, {
            text: this.showDeleteKey ? this.deleteButtonText : '',
            type: this.showDeleteKey ? 'delete' : '',
          });
          break;

        case 'custom':
          keys.push({
            text: 0,
            wider: true,
          }, {
            text: this.extraKey,
            type: 'extra',
          });
          break;
      }

      return keys;
    },
  },
  methods: {
    onBlur: function onBlur() {
      this.show && this.$emit('blur');
    },
    onClose: function onClose() {
      this.$emit('close');
      this.onBlur();
    },
    onAnimationEnd: function onAnimationEnd() {
      this.$emit(this.show ? 'show' : 'hide');
    },
    onPress: function onPress(text, type) {
      if (text === '') {
        if (type === 'extra') {
          this.onBlur();
        }

        return;
      }

      const { value } = this;

      if (type === 'delete') {
        this.$emit('delete');
        this.$emit('update:value', value.slice(0, value.length - 1));
      } else if (type === 'close') {
        this.onClose();
      } else if (value.length < this.maxlength) {
        this.$emit('input', text);
        this.$emit('update:value', value + text);
      }
    },
    genTitle: function genTitle() {
      const h = this.$createElement;
      const { title } = this;
      const { theme } = this;
      const { closeButtonText } = this;
      const titleLeft = this.slots('title-left');
      const showClose = closeButtonText && theme === 'default';
      const showTitle = title || showClose || titleLeft;

      if (!showTitle) {
        return;
      }

      return h('div', {
        class: bem('header'),
      }, [titleLeft && h('span', {
        class: bem('title-left'),
      }, [titleLeft]), title && h('h2', {
        class: bem('title'),
      }, [title]), showClose && h('button', {
        attrs: {
          type: 'button',
        },
        class: bem('close'),
        on: {
          click: this.onClose,
        },
      }, [closeButtonText])]);
    },
    genKeys: function genKeys() {
      const _this = this;

      const h = this.$createElement;
      return this.keys.map((key) => h(_Key.default, {
        key: key.text,
        attrs: {
          text: key.text,
          type: key.type,
          wider: key.wider,
          color: key.color,
        },
        on: {
          press: _this.onPress,
        },
      }, [key.type === 'delete' && _this.slots('delete'), key.type === 'extra' && _this.slots('extra-key')]));
    },
    genSidebar: function genSidebar() {
      const h = this.$createElement;

      if (this.theme === 'custom') {
        return h('div', {
          class: bem('sidebar'),
        }, [this.showDeleteKey && h(_Key.default, {
          attrs: {
            large: true,
            text: this.deleteButtonText,
            type: 'delete',
          },
          on: {
            press: this.onPress,
          },
        }, [this.slots('delete')]), h(_Key.default, {
          attrs: {
            large: true,
            text: this.closeButtonText,
            type: 'close',
            color: 'blue',
            loading: this.closeButtonLoading,
          },
          on: {
            press: this.onPress,
          },
        })]);
      }
    },
  },
  render: function render() {
    const h = arguments[0];
    const Title = this.genTitle();
    return h('transition', {
      attrs: {
        name: this.transition ? 'van-slide-up' : '',
      },
    }, [h('div', {
      directives: [{
        name: 'show',
        value: this.show,
      }],
      style: {
        zIndex: this.zIndex,
      },
      class: bem({
        unfit: !this.safeAreaInsetBottom,
        'with-title': Title,
      }),
      on: {
        touchstart: _event.stopPropagation,
        animationend: this.onAnimationEnd,
        webkitAnimationEnd: this.onAnimationEnd,
      },
    }, [Title, h('div', {
      class: bem('body'),
    }, [h('div', {
      class: bem('keys'),
    }, [this.genKeys()]), this.genSidebar()])])]);
  },
});

exports.default = _default;
